<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="/taglibs.jsp" %>
<head>
<title>
	<s:if test="%{product.id==null}">
		<s:text name="module.product.createProduct"/>
	</s:if>
	<s:else>
		<s:text name="module.product.editProduct"/>
	</s:else>
</title>
<script type="text/javascript">
function clearLookupField(id, name) {
	$(id).attr("value","");
	$(name).attr("value","");
}
$(function() {
	$('#introductionDate').datepicker({dateFormat:'yy-mm-dd',changeYear:true,changeMonth:true});
	$('#releaseDate').datepicker({dateFormat:'yy-mm-dd',changeYear:true,changeMonth:true});
	$('#salesDiscontinuationDate').datepicker({dateFormat:'yy-mm-dd',changeYear:true,changeMonth:true});
	$('#supportThruDate').datepicker({dateFormat:'yy-mm-dd',changeYear:true,changeMonth:true});
	//$("#save, #saveAndNew, #cancel" ).button();
	$("#save").click(function(){
		if($("#newForm").valid()) {
			newForm.action="product!create.action";
			newForm.submit();
		}});
	$("#saveAndNew").click(function(){
		if($("#newForm").valid()) {
			newForm.action="product!createAndNew.action";
			newForm.submit();
		}});
	
	$("#newForm").validate({
        rules: { 
		    'product.productCode': {remote:"product!checkUniqueness.action?checkedField=productCode"}
        },
		onkeyup: false,
		messages: {
			'product.productCode': {remote: jQuery.validator.format("<s:text name='error.uniqueConstraint'/>")}
		}
	});
	
	/* jqgrid in pop up select box */
	jQuery("#list").jqGrid( {
		url : '${ctx}/setup/category!categoryJsonList.action',
		datatype : "json",
		prmNames : {
			page : "jq.requestPage", rows : "jq.pageSize", sort : "jq.sortColumn",
			order : "jq.sortDirection", search : "jq._search", nd : "jq.nd", npage : null},
		jsonReader : {
			root : "rows", repeatitems : false, id : "0"},
		colNames : [ '<s:text name="module.catalog.catalogId"/>', 
		 			 '<s:text name="module.catalog.catalogName"/>', 
		 			 '<s:text name="module.catalog.parentCatalogName"/>'],
		colModel : [ {name : 'id',index : 'id', width : 140},
		     		 {name : 'name',index : 'name',width : 180},
		     		 {name : 'primaryParentCategory.name', sortable : false,width : 180}],		
		rowNum : 15,
		rowList : [15,30,50],
		height: 'auto',
		pager : '#pager',
		sortname : 'id',
		viewrecords: true,
		sortorder : 'asc',
		loadOnce : true,
		caption : false
	});
	jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});

	/* popup select box fo parent catalog */
	$( "#popupDialogSelectBox" ).dialog({
		autoOpen: false,
		height: 400,
		width: 520,
		modal: true,
		buttons: {
			"Select": function() {
				var id = jQuery("#list").jqGrid('getGridParam','selrow');
				if (id)	{
					var ret = jQuery("#list").jqGrid('getRowData',id);
					$("#primaryCategoryId").attr("value",ret.id);
					$("#primaryCategoryName").attr("value",ret.name);
					$( this ).dialog( "close" );
				} else { alert("Please select row");}
				$( this ).dialog( "close" );
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});
	
});//end


</script>
</head>
<body>
<h2>
	<s:hidden name="product.id"/>
	<s:if test="%{product.id==null}">
		<s:text name="module.product.createProduct"/>
	</s:if>
	<s:else>
		<s:text name="module.product.editProduct"/>
	</s:else>
</h2>


<div id="popupDialogSelectBox" title="Select a parent catalog">
<table id="list"></table>
<div id="pager"></div>
</div>

<form id="newForm" action="product!create.action" validate="true" autocomplete="off" method="POST">
<div class="ui-helper-clearfix">
	<button id="save" type="button"><s:text name="button.save"/></button>
	<button id="saveAndNew" type="button"><s:text name="button.saveAndNew"/></button>
	<button id="cancel" type="button" onclick="window.location='product!index.action'"><s:text name="button.cancel"/></button>
</div>
	<h3>General Information</h3>
	<fieldset>
	<table width="95%">
		<colgroup>
			<col width="22%" />
			<col width="28%" />
			<col width="22%" />
			<col width="28%" />
		</colgroup>
		<tbody>
			<tr>
				<td class="label">
					<s:label key="module.product.productType" for="productType"/></td>
				<td class="element" colspan="3">
				<s:select id="productType" name="product.productType.id" 
					value="product.productType.id"
					headerKey="FINISHED_GOOD" headerValue="Finished Good"
					emptyOption="true" 
					list="#application['SELECT_PRODUCT_TYPE']" />
			</tr>
			<tr>
				<td class="label mandatory">
					<s:label key="module.product.productCode" for="productCode"/></td>
				<td style="vertical-align:top;padding-top:4">
					<s:textfield id="productCode" name="product.productCode" maxlength="50" cssClass="required"/></td>
				<td class="label">
					<s:label key="module.product.hsCode" for="hsCode"/></td>
				<td style="vertical-align:top;padding-top:4">
					<s:textfield id="hsCode" name="product.hsCode" maxlength="50"/></td>
			</tr>
			<tr>
				<td class="label mandatory">
					<s:label key="module.product.internalName" for="internalName"/></td>
				<td>
					<s:textfield  id="internalName" name="product.internalName" cssClass="required"/>
					</td>
				<td class="label">
					<s:label key="module.product.brandName" for="brandName"/></td>
				<td>
					<s:textfield  id="brandName" name="product.brandName"/></td>
			</tr>
			<tr>
				<td class="label">
					<s:label key="module.product.comments" for="comments"/></td>
				<td colspan="3">
					<s:textarea  id="comments" name="product.comments" rows="3" cols="65"/></td>
			</tr>
			<tr>
				<td class="label">
					<s:label key="module.product.primaryProductCatalog" for="primaryCategoryName"/></td>
				<td colspan="3">
					<s:textfield  id="primaryCategoryName" name="product.primaryCategory.name" cssClass="required"
					 readonly="true"/>
					<s:hidden  id="primaryCategoryId" name="product.primaryCategory.id"/>
					<img src="${ctx}/themes/common/images/spacer.gif" class="clear_lookupfield" 
						width="15" height="10" border="0" align="absmiddle" title="Select" 
						onclick='$("#popupDialogSelectBox").dialog("open")'>
					<img src="${ctx}/themes/common/images/spacer.gif" class="clear_lookupfield" 
						width="15" height="10" border="0" align="absmiddle" title="Clear" 
						onclick="clearLookupField('#primaryCategoryId','#primaryCategoryName')">
					</td>
			</tr>
			<tr>
				<td class="label">
					<s:label key="module.product.introductionDate" for="introductionDate"/></td>
				<td>
					<s:textfield  id="introductionDate" name="product.introductionDate"/>
					</td>
				<td class="label">
					<s:label key="module.product.releaseDate" for="releaseDate"/></td>
				<td>
					<s:textfield  id="releaseDate" name="product.releaseDate"/></td>
			</tr>
			<tr>
				<td class="label">
					<s:label key="module.product.salesDiscontinuationDate" for="salesDiscontinuationDate"/></td>
				<td>
					<s:textfield  id="salesDiscontinuationDate" name="product.salesDiscontinuationDate"/>
					</td>
				<td class="label">
					<s:label key="module.product.supportDiscontinuationDate" for="supportDiscontinuationDate"/></td>
				<td>
					<s:textfield  id="supportDiscontinuationDate" name="product.supportDiscontinuationDate"/></td>
			</tr>
			<tr>
				<td class="label">
					<s:label key="module.product.requireAmount" for="requireAmount"/></td>
				<td>
					<s:select id="requireAmount" name="product.requireAmount" list="#application['SELECT_YES_NO']" value="product.requireAmount"/>
					<!-- Require the customer to enter an amount. --></td>
					</td>
				<td class="label">
					<s:label key="module.product.amountUomType" for="amountUomType"/></td>
				<td>
					<s:select id="amountUomType" name="product.amountUomType.id" list="#application['SELECT_UOM_TYPE']" value="product.amountUomType.id"/></td>
			</tr>
			<tr>
				<td class="label">
					<s:label key="module.common.description" for="description"/></td>
				<td colspan="3">
					<s:textarea  id="description" label="" name="product.description" rows="3" cols="65"/>
			</tr>
	
		</tbody>
	</table>
	</fieldset>	
	<%--
	<h3>General Information</h3>
	<fieldset>
		<table width="95%">
			<colgroup span="9" width="11.1%" >
			</colgroup>
			<tbody>
				<tr>
					<td></td>
					<td><s:text name="module.common.height"/></td>
					<td><s:text name="module.common.length"/></td>
					<td><s:text name="module.common.width"/></td>
					<td><s:text name="module.common.unit"/></td>
					<td><s:text name="module.common.NetWt"/></td>
					<td><s:text name="module.common.GrWt"/></td>
					<td><s:text name="module.common.unit"/></td>
					<td><s:text name="module.common.TotalQty"/></td>
				</tr>
				<tr>
					<td><s:text name="module.common.individualPack"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8" /></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
				</tr>
				<tr>
					<td><s:text name="module.common.bulkPack"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8" /></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
				</tr>
				<tr>
					<td><s:text name="module.common.exportCarton"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8" /></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
				</tr>
			</tbody>
		</table>
		<table width="95%">
			<colgroup span="6" width="16.7%" >
			</colgroup>
			<tbody>
				<tr>
					<td><s:text name="module.product.piecesIncluded"/></td>
					<td><s:textfield  id="ipHeight" name="product.supportThruDate" size="8"/></td>
					<td><s:text name="module.product.inShippingBox"/></td>
					<td><s:select id="inShippingBox" name="product.inShippingBox" list="#application['SELECT_YES_NO']" value="product.inShippingBox"/></td>
					<td><s:text name="module.product.defaultShippingBoxType"/></td>
					<td><s:select id="inShippingBox" name="product.inShippingBox" value="product.inShippingBox"
						headerKey="" headerValue="-- please select --"
						list="#application['SELECT_SHIPMENT_BOX_TYPE']" /></td>
				</tr>
			</tbody>
		</table>
	</fieldset>
	 --%>
</form>
</body>
